<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
				background: #F9F9F9;
			}
			.frame{
				width: 960px;
			    height: 620px;
			    margin: 0 auto;
			    margin-top: 20px;
			}
			.left{
				width: 50px;
			    height: 620px;
			    background: #2F2D2D;
			    float: left;
			    border-top-left-radius: 20px;
			    border-bottom-left-radius: 20px;
			}
			.left span{
			    display: block;
			    width: 10px;
			    height: 10px;
			    background: #606060;
			    margin: 0 auto;
			    border-radius: 100%;
			    margin-top: 305px;
			}
			.center{
			    width: 850px;
			    height: 560px;
			    background: #0E0E0E;
			    border: 30px solid #2F2D2D;
			    border-left: none;
			    border-right: none;
			    float: left;
			}
			.right{
				width: 60px;
			    height: 620px;
			    background: #2F2D2D;
			    float: left;
			    	border-top-right-radius: 20px;
			    border-bottom-right-radius: 20px;
			}
			.right span{
			    display: block;
			    width: 30px;
			    height: 30px;
			    background: #606060;
			    margin: 0 auto;
			    border-radius: 100%;
			    margin-top: 295px;	
			    box-shadow: 0px 0px 3px #F9F9F9 inset;
			}
			.menus{

				width:850px;
				height:60px ;
			    background: rgba(255, 255, 255, 0.03);
			}

			#canvas{
				background:#0E0E0E;
			}
			.xin{
			    color: #606060;
			    margin-top: 19px;
			    float: left;
			    margin-left: 20px;
			    font-family: sans-serif;
			    font-size: 13px;
			}
			#shv{
			    border: none;
			    outline: none;
			    float: left;
			    margin-top: 21px;
			    margin-left: 10px;
			    width: 13px;
			    background: none;
			    color: white;
			}
			.range{
			    float: left;
			    margin-top: 20px;
			    margin-left: 5px;
			}
			.color{
			    width: 9px;
			    height: 9px;
			    background: red;
			    display: block;
			    float: left;
			    margin-left: 4px;
			    margin-top: 21px;
			    border-radius: 100%;
			    border: 3px solid #D4D4D4;
			    cursor: pointer;
			}
			.bgcolor{
			    width: 9px;
			    height: 9px;
			    background: red;
			    display: block;
			    float: left;
			    margin-left: 4px;
			    margin-top: 21px;
			    border-radius: 100%;
			    border: 3px solid #D4D4D4;
			    cursor: pointer;
			}
			.con_but{
			    padding: 0px 10px 0px 10px;
			    color: #C5C5C5;
			    border: 1px solid #C5C5C5;
			    font-size: 11px;
			    border-radius: 25px;
			    margin-top: 20px;
			    float: left;
			    margin-left: 25px;
			    text-align: center;
			    line-height: 15px;
			    cursor: pointer;
			    height: 15px;
			    display: block;
			    font-family: sans-serif;				
			}
			.all_clear{
			    padding: 0px 10px 0px 10px;
			    color: #C5C5C5;
			    border: 1px solid #C5C5C5;
			    font-size: 11px;
			    border-radius: 25px;
			    margin-top: 20px;
			    float: left;
			    margin-left: 25px;
			    text-align: center;
			    line-height: 15px;
			    cursor: pointer;
			    height: 15px;
			    display: block;
			    font-family: sans-serif;			
			}
			.dow{
			    padding: 0px 10px 0px 10px;
			    color: #C5C5C5;
			    border: 1px solid #C5C5C5;
			    font-size: 11px;
			    border-radius: 25px;
			    margin-top: 20px;
			    float: left;
			    margin-left: 25px;
			    text-align: center;
			    line-height: 15px;
			    cursor: pointer;
			    height: 15px;
			    display: block;
			    font-family: sans-serif;		
			}
		</style>
		<script src="jquery.min.js"></script>
	</head>
	<body ncontextmenu="return false" onSelectStart="return false">
		<div class="frame">
			<div class="left">
				<span></span>
			</div>
			<div class="center">
				<div class="menus">
					<span class="xin">线条宽度</span>
					<input type="text" name="shv" id="shv" disabled="disabled" value="5" />
					<input type="range" class="range" value="5" name="range" min="1" max="20" step="1">
					<span class="xin">线条颜色</span>
					<span class="color" color="#fa6041" style="background:#fa6041;"></span>
					<span class="color" color="#00a57f" style="background:#00a57f;"></span>
					<span class="color" color="#26ba60" style="background:#26ba60;"></span>
					<span class="color" color="#F29225" style="background:#F29225;"></span>
					<span class="color" color="#28BAF9" style="background:#28BAF9;"></span>
					<span class="color" color="white" style="background:white;"></span>
					<span class="xin">画板颜色</span>
					<span class="bgcolor" color="#0E0E0E" style="background:#0E0E0E;"></span>
					<span class="bgcolor" color="#FFFFFF" style="background:#FFFFFF;"></span>
					<span class="bgcolor" color="#909090" style="background:#909090;"></span>
					<span class="bgcolor" color="url(taglik1.png)" style="background:#F55A73;"></span>
					<span class="con_but">橡皮擦</span>
					<span class="all_clear">一键擦除</span>
					<span class="dow">下载</span>
					<img id="hid_pic" src="" alt="" style="display: none;" />
				</div>
				<canvas id="canvas" width="850" height="500" background="#0E0E0E"></canvas>
				
			</div>
			<div class="right">
				<span></span>
			</div>
		</div>

		<script type="text/javascript">	
		var blackBoard=function(){
			//赋值给一个变量，为了将来到处可以用this
			var myThis=this;
			//原生对象
			myThis.myEle=document.getElementById("canvas");
			
			//画布对象
			myThis.myCtx=this.myEle.getContext("2d");
			
			//设置默认线条颜色
			myThis.myLineColor="#fa6041";
			
			//线条默认宽度
			myThis.myLineWidth=5;
			
			//运行方法
			myThis.myRun=function(){
				//当鼠标按下的时候
				$(myThis.myEle).mousedown(function(e){
					//初始化路径
					myThis.myCtx.beginPath();
		
					//设置线条颜色
					myThis.myCtx.strokeStyle=myThis.myLineColor;
					
					//设置线条宽度
					myThis.myCtx.lineWidth=myThis.myLineWidth;
					
					//设置起点
					myThis.myCtx.moveTo(e.clientX-$(this).position().left,e.clientY-$(this).position().top);
					
					//移动鼠标
					$(this).mousemove(function(e){
						myThis.myCtx.lineTo(e.clientX-$(this).position().left,e.clientY-$(this).position().top);
						myThis.myCtx.stroke();
					})
					
				})
				
				//鼠标抬起
				$(document).mouseup(function(){
					//解绑鼠标移动
					$(myThis.myEle).unbind("mousemove");
				})
			}
			
			
			
			
			
			
			
		
			
			
		}
		
		//实例化
		var obj=new blackBoard();
		obj.myRun();
		
			//拖动改变先大小
			$('.range').change(function(){
				$("#shv").val($(this).val());
				obj.myLineWidth = $(this).val();
//			alert($(this).val());
			})
			
			//点击改变颜色
			$(".color").click(function(){
				obj.myLineColor=$(this).attr("color");
			});
			
			//点击改变颜色
			$(".bgcolor").click(function(){
				var color=$(this).attr("color");
				$("#canvas").css({background:color});
				$("#canvas").attr("background",color);
			});
			
			//橡皮擦
			$(".con_but").click(function(){
				obj.myLineColor=$("#canvas").attr("background");
			});
			
			//一键擦除
			$(".all_clear").click(function(){
				obj.myCtx.clearRect(0,0,850,500);
			});
			
			//下载照片（导出照片）
			$(".dow").click(function(){
				var ctx = document.getElementById("canvas").getContext('2d');
				var src = document.getElementById("canvas").toDataURL('image/jpg');
				document.getElementById("hid_pic").src = src;
			});

		
		</script>
	</body>
</html>
